<template>
  <!-- 登录情况、usb介质使用情况  -->
  <div class="configuration-situation">
    <div class="left">
      <div class="con-title">
        <span>登录情况</span>
        <div>
          <el-select v-model="loginDateType" size="mini" placeholder="近一周" @change="changeTime('login')">
            <el-option v-for="i in dateSel" :key="i.value" :label="i.label" :value="i.value" />
          </el-select>
          <el-date-picker
            v-if="loginDateType == '4'"
            v-model="loginPickTime"
            size="mini"
            type="daterange"
            clearable
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="margin-left: 10px"
            @change="changeTime('login')" />
        </div>
      </div>
      <div class="l-value hk-flex">
        <div class="l-value-lfet hk-flex">
          <img src="@/assets/images/shijian.png" alt="" /> <span>刻画周期内共登录 <b>{{loginTotal}}</b>次</span>
        </div>
        <div>
          最早登录时间:<span class="little-word">{{ firstLoginTime?firstLoginTime:'-' }}</span>
        </div>
        <div>
          最晚登录时间:<span class="little-word">{{ lastLoginTime?lastLoginTime:'-' }}</span>
        </div>
      </div>
      <el-row :gutter="20" class="things">
        <HkTable
          ref="loginTableRef"
          :table-data="loginTableData"
          :table-columns="loginTableList"
          :show-index="true"
          :table-height="100"
          :show-pag="true"
          :total="loginTotal"
          :queryParams="loginQueryParams"
          @changePage="getLoginData" />
      </el-row>
    </div>
    <div class="right">
      <div class="con-title">
        <span class="title">USB介质使用情况</span>
        <div>
          <el-select v-model="usbDateType" size="mini" placeholder="近一周" @change="changeTime('usb')">
            <el-option v-for="i in dateSel" :key="i.value" :label="i.label" :value="i.value" />
          </el-select>
          <el-date-picker
            v-if="usbDateType == '4'"
            v-model="usbPickTime"
            size="mini"
            type="daterange"
            clearable
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="margin-left: 10px"
            @change="changeTime('usb')" />
        </div>
      </div>
      <div class="l-value hk-flex" style="justify-content: flex-start">
        <div
          v-for="(item, index) in btnObjs"
          :key="item.name + index"
          :class="['btn', activeIndex == index ? 'active' : '']"
          @click="handleChangeBtn(index,item.type)">
          {{ item.name }}({{ item.count }})
        </div>
      </div>

      <HkTable
        ref="tableRef"
        :loading="loading"
        :table-data="tableData"
        :table-columns="tableList"
        :show-index="true"
        :table-height="100"
        :show-pag="true"
        :total="total"
         :queryParams="queryParams"
        @changePage="getUsbData">
      </HkTable>
    </div>
  </div>
</template>

<script>
import HkTable from '@/components/Hk-Table'
import { software } from '@/api/dispose/userPortrait'
import { mapState } from 'vuex'
import {loginData,mediaData,mediaTypeCount} from '@/api/entityPortrait'
export default {
  components: {
    HkTable,
  },
  props:{
  ip:{
    type:String,
    default(){
      return ''
    }
  }
  },
  data() {
    return {
      total: 0,
      loginTotal:0,
      firstLoginTime:null,
      lastLoginTime: null,
      loading: false,
      // 表格数据
      loginTableData: [],
      loginTableList: [
        { label: '用户名', param: 'op_user' },
        { label: '登录时间', param: 'loginTime' },
        // { label: '关闭时间', param: 'closeTime' },
      ],
      tableData: [],
      //  表格
      tableList: [
        { label: '序列号', param: 'hd_seq' },
        // { label: '所属单位', param: 'status', type: 'slot' },
        { label: '责任人', param: 'op_user' },
        { label: '责任部门', param: 'op_dept' },
        // { label: '密级', param: 'createTime' },
        { label: '介质属性', param: 'typeValue' },
        { label: '操作时间', param: 'op_time' },
      ],
      // 配置情况数组
      configArr: [],
      loginQueryParams:{
         current: 1,
        size: 10,
      },
      queryParams: {
        current: 1,
        size: 10,
      },
      loginDateType: '2',
      // 时间选择
      dateSel: [
        {
          label: '近一日',
          value: '1',
        },
        {
          label: '近一周',
          value: '2',
        },
        {
          label: '近一月',
          value: '3',
        },
        {
          label: '自定义',
          value: '4',
        },
      ],
      loginPickTime: '',
      usbPickTime: '',
      usbDateType: '2',
      //  usb按钮
      btnObjs: [
        { name: '涉密专用存储介质',type:'1', count: 0 },
        { name: '通用USB介质', type:'2', count: 0 },
        { name: 'USB外设', type:'3', count: 0 },
        { name: '其他介质',type:'4',  count: 0 },
      ],
      activeIndex: 0,
      type:1
    }
  },
    watch: {
    ip: {
      handler(newValue) {
        if (newValue) {
          this.getLoginData()
          this.getUsbData()
        }
      },
      immediate: false,
      deep: true
    }
  },
  computed: {
  },
  mounted() {
    this.getLoginData();
  },
  methods: {
    // 改变时间
    changeTime(type) {
      if(type=='login'){
        this.getLoginData();
      }else if(type=='usb'){
        this.getUsbData()
      }
    },
    //  登录情况
    getLoginData() {
      if (this.loginDateType === '4' && this.loginPickTime.length === 0) return
      else if (this.loginDateType !== '4') {
        this.loginPickTime = []
      }
      const startDay = this.loginPickTime[0] || ''
      const endDay = this.loginPickTime[1] || ''
      //  获取登录信息
      if(this.ip){
        loginData({...this.loginQueryParams,ip:this.ip,searchType:this.loginDateType,startTime:startDay, endTime:endDay}).then(res=>{
                this.firstLoginTime=res.firstLoginTime;
                this.lastLoginTime=res.lastLoginTime;
                this.loginTotal=res.total;
                this.loginTableData=res.list;
              })
      }
      
    },
    //  usb介质数据
    getUsbData(){
 if (this.usbDateType === '4' && this.usbPickTime.length === 0) return
      else if (this.usbDateType !== '4') {
        this.usbPickTime = []
      }
      const startDay = this.usbPickTime[0] || ''
      const endDay = this.usbPickTime[1] || ''
      //  获取介质类型统计
      mediaTypeCount({ip:this.ip,searchType:this.usbDateType,startTime:startDay, endTime:endDay}).then(res=>{
        this.btnObjs.forEach((i)=>{
          i.count=res[i.type]?res[i.type]:0
        })
      })
      mediaData({...this.queryParams,type:this.type,ip:this.ip,searchType:this.usbDateType,startTime:startDay, endTime:endDay}).then(res=>{
        this.total=res.total;
        this.tableData=res.list;
      })
    },
    // 改变usb按钮
    handleChangeBtn(index,type) {
      this.activeIndex = index
      // 1涉密专用 2通用USB 3USB外设 4其它
      this.type=type
      this.getUsbData()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__body-wrapper {
  overflow-y: auto !important;
}
.configuration-situation {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 14px;

  .left {
    width: calc(50% - 20px);
    background: #fff;
    padding: 20px;
    margin-right: 20px;
  }
  .right {
    width: 50%;
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    &::v-deep {
      .targetTable {
        flex: 1;
        padding-bottom: 0;
        overflow: auto;
        .el-table {
          margin-top: 15px;
        }
      }
    }
  }
  .con-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    .reset {
      font-size: 12px;
      color: #4b6eef;
      font-weight: 400;
      cursor: pointer;
    }
  }
  .l-value {
    margin: 20px 0 0;
    justify-content: space-between;
    .l-value-lfet {
      vertical-align: middle;
      img {
        width: 26px;
        vertical-align: middle;
        margin-right: 5px;
      }
      b {
        font-size: 20px;
        margin: 0 5px;
      }
    }
    .btn {
      padding: 6px 20px;
      border-radius: 4px;
      border: 1px solid #c0c4cc;
      margin-right: 20px;
      cursor: pointer;
      &.active {
        background: #4b6eef;
        color: #fff;
        border: 1px solid transparent;
      }
    }
  }
  .little-word {
    margin-left: 6px;
    color: #8c8c8c;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .things {
    display: flex;
    .targetTable {
      height: 400px;
    }
    .thing {
      margin-right: 10px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      &:last-of-type {
        margin-right: 0;
      }
      .t-title {
        background: rgba(243, 245, 252, 0.5);
        padding: 10px 20px;
        color: #4b6eef;
        border-bottom: 1px solid #e5e5e5;
      }
      .t-bottom {
        flex: 1;
        padding: 20px 10px;
        .el-row {
          margin-bottom: 10px;
        }
      }
    }
  }
  .overview {
    margin-top: -15px;
    text-align: right;
    span {
      margin-left: 20px;
      display: inline-flex;
      align-items: center;
      i {
        font-style: normal;
        font-size: 24px;
        color: #fa541c;
        text-align: center;
        font-weight: 400;
      }
      &:nth-of-type(2) {
        i {
          color: #4b6eef;
        }
      }
    }
  }
}
::v-deep {
  .el-col {
    padding: 0 !important;
    margin: 5px 0;
  }
  .cell {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pagination-container {
    // height: 32px;
    // margin-top: -8px;
  }
}
</style>
